<template>
    <div class="endSoon-wrapper">
        <IHeader class="header" back="true" title="求购信息"></IHeader>
        <div class="tab-wrapper">
            <div class="tab-content flex_row">
                <div class="tab-item" @click="handleTabChange(index)" :class="[tabIndex === index ? 'active-tab' : '']" v-for="(item, index) in tabList" :key="index">
                    <text class="tab-word" :class="[tabIndex === index ? 'active-word' : '']">{{item.word}}</text>
                    <image v-if="index === (tabList.length - 1) && tabIndex !== (tabList.length - 1)" class="arrow" :src="imgPath('triangle_down.png')"></image>
                    <image v-if="index === (tabList.length - 1) && tabIndex === (tabList.length - 1)" class="arrow" :src="imgPath(masterOpen ? 'sort_1a.png' : 'sort_1c.png')"></image>
                </div>
            </div>
        </div>
        <div class="master-wrapper" v-if="masterOpen">
            <div class="master-list">
                <div class="master-item" :class="[masterIndex !== (masterList.length - 1) ? 'border_bottom_ebebeb' : '']" v-for="(item, index) in masterList" :key="index" @click="handleClickCell(index)">
                    <text class="master-name" :class="[masterIndex === index ? 'active-master' : '']">{{item.word}}</text>
                    <Check :show="masterIndex === index" :checked="masterIndex === index" @doclick="handleClickCell(index)"></Check>
                </div>
            </div>
        </div>
        <list class="itemList" @loadmore="loadMore" loadmoreoffset="50">
            <cell class="itemCell flex_row" v-for="(item, index) in dataList" :key="index" @click="toTaskDetail(item)">
                <div class="cell-box flex_row">
                    <image class="cell-image" :src="item.imgUrl ? item.imgUrl : imgPath('default_image.png')" resize="contain"></image>
                    <div class="cell-content">
                        <div class="cell-user flex_row">
                            <image class="user-avatar" :src="item.userPic ? item.userPic : imgPath('default_avatar.png')"></image>
                            <text class="user-name line-1">{{item.userName ? item.userName : '无昵称'}}</text>
                        </div>
                        <text class="cell-title line-1">{{item.title}}</text>
                        <div class="flex_row line-1 cell-content" style="margin-bottom: 8px;">
                            <text v-if="tabIndex === 0 || tabIndex === 1" class="cell-number fs_24 col_868686 line_height_36">数量：{{item.orderNumber}}{{item.numberUnit}}</text>
                            <text v-if="tabIndex === 2" class="cell-number fs_24 col_868686 line_height_36">订单数量：{{item.orderNumber}}</text>
                            <text v-if="tabIndex === 3" class="cell-number cell-content line-1 fs_24 col_868686 line_height_36">主营产品：{{item.type}}</text>
                            <text v-if="tabIndex === 4" class="cell-number fs_24 col_868686 line_height_36">预算：{{item.budget == 0 ? '面议' : item.budget}}</text>
                            <text v-if="tabIndex === 0 || tabIndex === 1" class="fs_24 col_868686 line_height_36">求购类型：{{item.type}}-{{item.subType}}</text>
                            <text v-if="tabIndex === 2" class="cell-number fs_24 col_868686 line_height_36">产品类型：{{item.type}}</text>
                            <text v-if="tabIndex === 4" class="cell-number fs_24 col_868686 line_height_36">高人类型：{{item.type}}</text>
                        </div>
                        <div class="flex_row space_between align_center">
                            <text class="cell-time line_height_36">截止时间：{{item.taskValidity}}</text>
                            <text class="cell-button fs_24" @click="getOrder(item)" v-if="item.taskStatus === '1'">接单</text>
                            <text class="cell-button fs_24" v-if="item.taskStatus === '2' || item.taskStatus === '5'">来晚了</text>
                        </div>
                    </div>
                </div>
                <div class="bar"></div>
            </cell>
        </list>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Check from '@/components/check'
import { WxcLoading } from 'weex-ui'
import { queryTaskList, changeTaskStatus } from '@/api/home'
import { getMasterTaskList } from '@/api/market'
// getMasterList
const modal = weex.requireModule('modal')

export default {
  name: 'askInformation',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: true, // loading
      hasMore: true, // 是否还有数据
      askType: ['大货', '样品'], // 求购类型
      childrenType: ['现货', '定制'], // 子类型列表
      tabIndex: 0, // tab下标
      tabList: [
        {
          word: '求购布料',
          type: '8'
        },
        {
          word: '求购辅料',
          type: '9'
        },
        {
          word: '外发订单',
          type: '10'
        },
        {
          word: '对外加工',
          type: '11'
        },
        {
          word: '寻找高人',
          type: '12'
        }
      ], // tab列表
      masterIndex: 0,
      masterList: [
        {
          word: '设计师',
          type: '4'
        },
        {
          word: '打版师',
          type: '5'
        },
        {
          word: '样衣工',
          type: '6'
        },
        {
          word: '裁床工',
          type: '7'
        },
        {
          word: '临时工',
          type: '8'
        }
      ],
      masterOpen: false, // 找高人类别
      pageNo: 1,
      pageSize: 10,
      dataList: [] // 数据列表
    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    handleTabChange (inx) { // 类型切换
      const that = this
      if (that.tabIndex === inx) {
        if (inx === (that.tabList.length - 1)) {
          that.masterOpen = !that.masterOpen
        }
      } else {
        that.tabIndex = inx
        that.masterOpen = false
        that.pageNo = 1
        that.dataList = []
        that.getDataList()
      }
    },
    getDataList () { // 获取数据列表
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize,
        serviceType: that.tabList[that.tabIndex].type
      }
      that.loadingShow = true
      that.$api.get(queryTaskList, params, (res) => {
        that.loadingShow = false
        if (res.data.records.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.dataList = that.dataList.concat(res.data.records)
      }, () => {
        that.loadingShow = false
      })
    },
    handleClickCell (inx) {
      const that = this
      that.masterIndex = inx
      that.pageNo = 1
      that.dataList = []
      that.queryMasterList()
      that.masterOpen = false
    },
    queryMasterList () {
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize,
        masterType: that.masterList[that.masterIndex].type
      }
      that.loadingShow = true
      that.$api.get(getMasterTaskList, params, (res) => {
        that.loadingShow = false
        if (res.data.records.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.dataList = that.dataList.concat(res.data.records)
      }, () => {
        that.loadingShow = false
      })
    }, // 查询找高人列表
    toTaskDetail (item) { // 查看详情
      const that = this
      that.$router.push({
        path: '/mine/taskOrderDetail',
        query: {
          id: item.id,
          type: 0,
          serviceType: item.serviceType
        }
      })
    },
    getOrder (item) { // 接单
      const that = this
      let params = {
        id: item.id,
        taskStatus: 2
      }
      that.$api.post(changeTaskStatus, params, () => {
        modal.toast({
          message: '接单成功'
        })
      }, () => {}, true)
    },
    loadMore () {
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getDataList()
    }
  },
  components: {
    IHeader,
    Check,
    WxcLoading
  }
}
</script>

<style scoped>
    .border_bottom_ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .flex_row {
        flex-direction: row;
    }
    .space_between {
        justify-content: space-between;
    }
    .col_868686 {
        color: #868686;
    }
    .fs_24 {
        font-size: 24px;
    }
    .itemList {
        min-height: 700px;
        background-color: #f5f5f5;
    }
    .itemCell {
        padding-top: 24px;
        flex-wrap: wrap;
        background-color: #fff;
    }
    .cell-box {
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 24px;
    }
    .cell-image {
        width: 200px;
        height: 200px;
        margin-right: 24px;
        border-width: 1px;
        border-style: solid;
        border-color: #ebebeb;
        border-radius: 10px;
    }
    .bar {
        width: 750px;
        height: 16px;
        background-color: #f5f5f5;
    }
    .cell-content {
        width: 476px;
    }
    .line-1 {
        lines: 1;
        text-overflow: ellipsis;
    }
    .cell-user {
        align-items: center;
    }
    .user-avatar {
        width: 56px;
        height: 56px;
        margin-right: 16px;
        border-radius: 28px;
    }
    .user-name {
        width: 390px;
        color: #666;
        font-size: 26px;
    }
    .cell-title {
        font-size: 30px;
        font-weight: bold;
        color: #464646;
        line-height: 64px;
    }
    .cell-number {
        margin-right: 24px;
    }
    .line_height_36 {
        line-height: 36px;
    }
    .cell-time {
        font-size: 22px;
        color: #ff0f37;
    }
    .cell-button {
        width: 100px;
        height: 30px;
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
        color: #2b3040;
        line-height: 30px;
        text-align: center;
        border-radius: 8px
    }
    .tab-wrapper {
        /*position: absolute;*/
        /*top: 88px;*/
        /*left: 0;*/
        /*right: 0;*/
        margin-top: 88px;
        padding-left: 24px;
        padding-right: 24px;
    }
    .tab-content {
        justify-content: space-between;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .tab-item {
        flex-direction: row;
        align-items: center;
    }
    .tab-word {
        color: #868686;
        font-size: 24px;
        line-height: 88px;
    }
    .active-word {
        color: #fecb01;
        font-size: 26px;
        font-family: bold;
    }
    .active-tab {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #fecb01;
    }
    .arrow {
        width: 18px;
        height: 12px;
    }
    .master-wrapper {
        position: fixed;
        top: 177px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(43, 48, 64, 0.5);
    }
    .master-list {
        padding-left: 24px;
        padding-right: 24px;
        background-color: #fff;
    }
    .master-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .master-name {
        line-height: 88px;
        color: #cecece;
        font-size: 28px;
        font-family: medium;
    }
    .active-master {
        color: #fecb01;
        font-family: bold;
    }
</style>
